import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Tools,Flex,Button} from 'weaver-mobile';
import {Route, withRouter } from 'react-router-dom';
import QueueAnim from 'rc-queue-anim';

const getLabel = Tools.getLabel;


@withRouter
// @inject ('rememberStore')
@observer
class TypeModal extends React.Component {
    constructor(props){
        super(props);
    }

    // static defaultProps = {
    //     prefixCls:"fnaMobile-home"
    // }

    componentDidMount() {
       
 
    }

    render() {
        const {visible,data,typeMark,handleType,resetType,click} = this.props;

        return (
            visible && 
            <div style={{position:'relative'}}>
                <div className={'fna-cover'}></div>
                <div className={'fna-float'}>
                    <Flex className={'fna-flex-img fna-flex-border'}>
                        {data.map( item => {
                            return (
                                <React.Fragment key={item.key}>
                                    {!toJS(typeMark[item.key]) && <Flex.Item   className={`fna-flex-img-item fna-flex-item-border`} onClick={()=>{handleType(item.key)}}>
                                        <div className={`fna-flex-img-item-text`} >{item.title}</div>
                                    </Flex.Item>}
                                    {toJS(typeMark[item.key]) && <Flex.Item style={{border:'1px solid #077AE5'}}  className={`fna-flex-img-item fna-flex-item-border`} onClick={()=>{handleType(item.key)}}>
                                        <div className={`fna-flex-img-item-text`} style={{color:'#077AE5'}}>{item.title}</div>
                                    </Flex.Item>}
                                </React.Fragment>
                            )
                        })}
                    </Flex>
                    <div style={{textAlign:'center'}}>
                        <Button type="primary" size="small" inline style={{margin:'2% 8px'}} onClick={()=>{click()}}>{getLabel(387355,'搜索')}</Button>
                        <Button type="default" size="small" inline style={{margin:'2% 8px'}} onClick={()=>{resetType()}}>{getLabel(509254,'重置')}</Button>
                        <Button type="default" size="small" inline style={{margin:'2% 8px'}} onClick={()=>{click()}}>{getLabel(516571,'取消')}</Button>
                    </div>
                </div>
            </div>
        )
    }


}

export default TypeModal;